<template>
<!-- 商户管理基本信息 -->
  <div class="app-container">
    <!--搜索组件-->
    <!-- 操作按钮 -->
    <div class="overtable-btns">
      <el-button size="mini" type="warning" icon="el-icon-back">返回</el-button>
      <el-button size="mini" type="primary" icon="el-icon-folder-checked">保存</el-button>
      <el-button size="mini" icon="el-icon-refresh">重置</el-button>
    </div>
    <!-- :rules="rules" -->
    <el-form class="form-wrap" ref="addPartner" :model="form" size="small" label-width="145px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="联系信息" name="1">
          <el-form-item label="联系人姓名:" prop="realName">
            <el-input v-model.trim="form.realName" maxlength="15" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="联系人身份证:" prop="identity">
            <el-input v-model.trim="form.identity" placeholder="请输入身份证号" clearable />
          </el-form-item>
          <el-form-item label="手机号码:" prop="phone">
            <el-input v-model.number="form.phone" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="联系邮箱:" prop="email">
            <el-input v-model.trim="form.email" placeholder="请输入联系人邮箱" clearable />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="经营信息" name="2">
          <el-form-item label="商户名称:" prop="productName">
            <el-input v-model="form.productName" placeholder="请输入商户名称" clearable />
          </el-form-item>
          <el-form-item label="商户号:" prop="productNum">
            <el-input v-model="form.productNum" placeholder="请输入商户号" clearable />
          </el-form-item>
          <el-form-item label="商户简称:" prop="proNickName">
            <el-input v-model="form.proNickName" placeholder="请输入商户简称" clearable />
          </el-form-item>
          <el-form-item label="商户类型:" prop="merType">
            <el-select v-model="form.merType" placeholder="商户类型" clearable>
              <el-option
                v-for="item in merchantType"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="行业类别:" prop="hylb">
            <el-cascader
              v-model="form.hylb"
              :options="hylbOptions"
              placeholder="请选择行业类别"
              clearable
            />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="主体信息" name="3">
          <el-form-item label="商户状态:" prop="merStatus">
            <el-select v-model="form.merStatus" placeholder="商户状态" clearable>
              <el-option
                v-for="item in merchantStatus"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="营业执照类型:" prop="yyzzlx">
            <el-select v-model="form.yyzzlx" placeholder="营业执照类型" clearable>
              <el-option
                v-for="item in licenseType"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="营业执照编号:" prop="licenseNo">
            <el-input v-model.trim="form.licenseNo" placeholder="请输入营业执照编号" clearable />
          </el-form-item>
          <el-form-item label="税务登记号:" prop="taxRegNum">
            <el-input v-model.trim="form.taxRegNum" placeholder="请输入税务登记号" clearable />
          </el-form-item>
          <el-form-item label="组织机构代码:" prop="organizeCode ">
            <el-input v-model.trim="form.organizeCode " placeholder="请输入组织机构代码" clearable />
          </el-form-item>
          <el-form-item label="营业执照有效期:" prop="iii">
            <dateSelect ref="dateSelect" @handleTime="getDate" />
          </el-form-item>
          <el-form-item label="证件执照:" prop="www"></el-form-item>
          <el-form-item label="特殊资质:" prop="ppp"></el-form-item>
        </el-collapse-item>
        <el-collapse-item title="法人信息" name="4">
          <el-form-item label="实名认证姓名:" prop="veriName">
            <el-input v-model.trim="form.veriName" placeholder="姓名" clearable />
          </el-form-item>
          <el-form-item label="实名认证身份证:" prop="veriIndo">
            <el-input v-model.trim="form.veriIndo" placeholder="身份证号" clearable />
          </el-form-item>
          <el-form-item label="身份证正反面:" prop="indoPic"></el-form-item>
          <el-form-item label="身份证有效期:" prop="lll">
            <dateSelect ref="dateSelectIndo" @handleTime="getDateIndo" />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="结算信息" name="5">
          <el-form-item label="结算方式:" prop="settleType">
            <el-select v-model="form.settleType" placeholder="结算方式" clearable>
              <el-option
                v-for="item in settleTypes"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="支付结算费率:" prop="payRade">
            <el-input v-model.trim="form.payRade" placeholder="请输入支付结算费率" clearable />
          </el-form-item>
          <el-form-item label="微卡结算费率:" prop="wecardRade">
            <el-input v-model.trim="form.wecardRade" placeholder="请输入微卡结算费率" clearable />
          </el-form-item>
          <el-form-item label="微卡免费率结算额度:" prop="wecardAmount">
            <el-input v-model.trim="form.wecardAmount" placeholder="请输入微卡免费率结算额度" clearable />
          </el-form-item>
          <el-form-item label="微卡免费率结算周期:" prop="ooo">
            <dateSelect ref="dateSelectWecard" @handleTime="getDateWecard" />
          </el-form-item>
          <el-form-item label="账户类型:" prop="accountType">
            <el-select v-model="form.accountType" placeholder="账户类型" clearable>
              <el-option
                v-for="item in accountTypes"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="账户名:" prop="cardUser">
            <el-input v-model.trim="form.cardUser" placeholder="请输入账户名" clearable />
          </el-form-item>
          <el-form-item label="银行名称:" prop="bankId">
            <el-select
              v-model="form.bankname"
              @change="getBankVal"
              filterable
              placeholder="请选择银行名称(可搜索)"
              clearable
            >
              <el-option
                v-for="item in banknameOptions"
                :key="item.id"
                :label="item.bankName"
                :value="item.id+' '+item.bankName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="银行卡号:" prop="bankcard">
            <el-input v-model.number="form.bankcard" placeholder="请输入银行卡号" clearable />
          </el-form-item>
          <el-form-item label="开户地区:" prop></el-form-item>
          <el-form-item label="开户支行:" prop="branchname">
            <el-input v-model.trim="form.branchname" placeholder="请输入开户支行名称" clearable />
          </el-form-item>
          <el-form-item label="开户许可证:" prop></el-form-item>
          <el-form-item label="结算卡照片:" prop></el-form-item>
          <el-form-item label="委托收款授权书:" prop></el-form-item>
        </el-collapse-item>
        <el-collapse-item title="分润信息" name="6">
          <el-form-item label="商户会员号码:" prop>
            <el-input v-model.trim="form.memberNum" placeholder="请输入商户会员号码" clearable />
          </el-form-item>
          <el-form-item label="归属服务商:" prop>
            <el-select
              v-model="form.parentId"
              filterable
              remote
              :remote-method="remoteMethod"
              :loading="parLoading"
              placeholder="请输入推荐人姓名(可搜索)"
              clearable
            >
              <el-option
                v-for="item in partnerOptions"
                :key="item.id"
                :label="item.realName"
                :value="item.id"
              >
                <span style="float: left">{{ item.realName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="交易信息" name="7">
          <el-form-item label="交易状态:" prop>
            <el-select v-model="form.tradStatus" placeholder="结算方式" clearable>
              <el-option
                v-for="item in tradeStatus"
                :key="item.key"
                :label="item.display_name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="支付商户号:" prop>
            <el-input v-model.trim="form.payNo" placeholder="请输入支付商户号" clearable />
          </el-form-item>
          <el-form-item label="支付商户key:" prop>
            <el-input v-model.trim="form.payKey" placeholder="请输入支付商户key" clearable />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import areaSelect from '@/components/AreaSelect/index'
import dateSelect from '@/components/DateSelect/index'
export default {
  components: {
    areaSelect,
    dateSelect
  },
  data() {
    return {
      activeNames: ['1', '2', '3', '4', '5', '6', '7'],
      form: {
        areaVal: [],
        realName: '',
        phone: '',
        identity: '',
        signAt: '',
        signTime: '',
        isCommission: '',
        participation: '',
        cityId: '',
        districtId: '',
        provinceId: '',
        cardUser: '',
        cardIdno: '',
        bankname: '',
        bankId: '',
        bankcard: '',
        cardPhone: '',
        branchname: '',
        parentId: '',
        licStartTime: 0,
        licEndTime: 0
      },
      merchantType: [
        { key: 0, display_name: '个体工商户' },
        { key: 1, display_name: '企业' },
        { key: 2, display_name: '事业单位' },
        { key: 3, display_name: '个人' }
      ],
      licenseType: [
        { key: 1, display_name: '多证合一' },
        { key: 0, display_name: '非多证合一' }
      ],
      merchantStatus: [
        { key: 1, display_name: '启用' },
        { key: 0, display_name: '禁用' }
      ],
      tradeStatus: [
        { key: 1, display_name: '启用' },
        { key: 0, display_name: '禁用' }
      ],
      settleTypes: [
        { key: 0, display_name: 'D0' },
        { key: 1, display_name: 'D1' },
        { key: 2, display_name: 'T0' },
        { key: 3, display_name: 'T1' }
      ],
      accountTypes: [
        { key: 0, display_name: '对公账户' },
        { key: 1, display_name: '法人对私账户' },
        { key: 2, display_name: '非法人对私账户' }
      ],
      hylbOptions: []
    }
  },
  methods: {
    // 时间选择
    getDate({ startTime, endTime, val }) {
      this.form.licStartTime = startTime
      this.form.licEndTime = endTime
    },
    getDateIndo({ startTime, endTime, val }) {
      this.form.indoStartTime = startTime
      this.form.indoEndTime = endTime
    },
    getDateWecard({ startTime, endTime, val }) {
      this.form.wecardStartTime = startTime
      this.form.wecardEndTime = endTime
    }
  }
}
</script>

<style lang="scss" scoped>
.form-wrap {
  .el-form-item--small,
  .el-form-item {
    width: 550px;
    .el-select,
    .el-input,
    .el-cascader,
    .el-range-editor {
      width: 100% !important;
    }
  }
}
</style>